<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>微信安全支付</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css"/>
<link type="text/css" rel="stylesheet" href="/libs/HUI-master/css/hui.css" />
    <style type="text/css">
        .top{
            height: 40vh;
            background: #00c250;
            display: flex;
            align-items: center;
            color: #fff;
            justify-content: center;
        }
        .tips{
            display: flex;
            align-items: center;
            color: #888;
            margin: 15px;
        }
        .footer{
            text-align: center;
            position: absolute;
            bottom: 15px;
            color: #888;
            font-size: 10px;
            width: 100%;
        }
    </style>
</head>
<body>
    <header class="hui-header" style='background: #00c250;'>
        <div id="hui-back"></div>
        <h1>人生得意须尽欢</h1>
        <div style="width: 60px;"></div>
    </header>
    <div >
        <div class='top'>
            <img src='/images/mobile/wechatpay.png' style="width: 100px;">
            <div style="    font-size: 40px;margin-left: 20px;color:#fff;">微信支付</div>
        </div>
        <div class="bottom">
            <div class="tips">
                <div class="weui-cells__group weui-cells__group_form" style="width: 100%;">
                    <div class="weui-cells weui-cells_checkbox">
                        <label class="weui-cell weui-cell_active weui-check__label" for="s11">
                            <div class="weui-cell__hd">
                                <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked">
                                <i class="weui-icon-checked"></i>
                            </div>
                            <div class="weui-cell__bd" >
                                <p style="color: #888;">已开启安全支付</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div style="margin-top: 50px;">
                <a href="javascript:;" class="weui-btn weui-btn_primary" style="width: 80%;">正在加载。。。</a>
            </div>
            <div class="footer">
                <span>支付安全由中国人民财产保险股份有限公司承保</span>
            </div>
        </div>
    </div>
    
    <script src="/libs/HUI-master/js/hui.js"></script>
    <script>
        var born_domain = ''
        var no = ''
        var _this = this

        //获取落地
        function getBorn(){
            hui.ajax({
                type : 'POST',
                url : '/api/born-domain',
                data : {
                    code:'{{$code}}',
                },
                timeout:10000,
                backType:'JSON',
                beforeSend : function(){},
                complete   : function(){},
                success : function(res){
                    if(res['status'] == 'success'){
                        born_domain = res.data.born_domain
                    }else{
                        hui.iconToast('请求错误', 'warn')
                    }
                },
                error : function(e){
                    hui.upToast('连接服务器失败！')
                }
            })
        }
        

        //获取支付结果
        function getResult(){
            if(no != ''){
                hui.ajax({
                    type : 'POST',
                    url : '/api/pay-result',
                    data : {
                        code:'{{$code}}',
                        video_id:"{{$video['id']}}",
                        no:no,
                    },
                    timeout:10000,
                    backType:'JSON',
                    beforeSend : function(){hui.loading('查询支付结果...')},
                    complete   : function(){
                        hui.closeLoading()
                    },
                    success : function(res){
                        if(res['status'] == 'success'){
                            if(born_domain!=''){
                                location.href="http://"+born_domain+'/play?code={{$code}}&video_id={{$video['id']}}'
                            }else{
                                hui.iconToast('请在首页已购查看', 'success')
                                window.history.go(-1); 
                            }
                        }else{
                            hui.iconToast('支付失败，请重试', 'warn')
                            window.history.go(-1); 
                        }
                    },
                    error : function(e){
                        hui.upToast('连接服务器失败！')
                    }
                })
            }else{
                hui.iconToast('未查询到结果，在首页已购查看', 'success')
                window.history.go(-1); 
            }
        }


        window.onload=function(){
            //支付请求
            function postPay(){
                let price = '{{$once_price}}'
                let video_id = "{{$video['id']}}"

                
                hui.ajax({
                    type : 'POST',
                    url : '/api/get-pay',
                    data : {
                        code:'{{$code}}',
                        price:price,
                        video_id:video_id,
                        pay_openid:"{{$pay_openid}}"
                    },
                    timeout:60000,
                    backType:'JSON',
                    beforeSend : function(){hui.loading('支付请求中...')},
                    complete   : function(){
                        hui.closeLoading()
                    },
                    success : function(res){
                        if(res.status=='-1'){
                            hui.iconToast('支付失败，请重试', 'warn')
                            setTimeout(function(){
                                window.history.go(-1)
                            },1000)
                            
                        }else if(res.type =='wx'){
                            _this.payData = res.config
                            no = res.no
                            hui.closeLoading()
                            // 下面是兼容不同浏览器绑定事件的方法
                            if (typeof WeixinJSBridge == "undefined"){
                            if( document.addEventListener ){
                                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                            }else if (document.attachEvent){
                                document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                            }
                            }else{
                                onBridgeReady()
                            }
                        }else if(res.type =='hs'){
                            location.href=res.url
                        }
                        else if(res.type =='7sm' || res.type =='hs'){
                            document.write(res.html)
                        }
                    },
                    error : function(e){
                        hui.upToast('连接服务器失败！')
                        setTimeout(function(){
                            window.history.go(-1)
                        },1000)
                    }
                })
            }
            //调起支付
            function onBridgeReady(){
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":_this.payData.appId,     //公众号名称，由商户传入     
                        "timeStamp":_this.payData.timeStamp,         //时间戳，自1970年以来的秒数     
                        "nonceStr":_this.payData.nonceStr,  //随机串     
                        "package":_this.payData.package,     
                        "signType":"MD5",         //微信签名方式：     
                        "paySign":_this.payData.paySign,  //微信签名 
                    },
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            getResult()
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        } else{
                            hui.iconToast('支付失败，请重试', 'warn')
                            window.history.go(-1); 
                        }
                    }
                ); 
            }

            //获取支付
            getBorn()
            //发生支付
            postPay()
        }
    </script>
</body>
</html>